<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>

<script>
  export default{
    name:'UE',
    props:{
      defaultMsg:{
        type:String
      },

      disabled:{
        type:Boolean
      },
      contentChangeHandle : {
        type:Function
      },
      content : {
        type : String
      }
    },
    data () {
      return {
        editor:null,
        config:{
          initialFrameWidth: null,
          initialFrameHeight: 500,
          elementPathEnabled:false,
          autoHeightEnabled: false,
          autoFloatEnabled:false,
          toolbars: [
            ['undo','redo','selectall','bold','italic','underline','justifyleft','justifyright','justifycenter','justifyjustify','rowspacingtop','rowspacingbottom','lineheight','forecolor','fontfamily','fontsize','paragraph','fullscreen'],
            ['removeformat','link','pasteplain','indent','insertorderedlist','insertunorderedlist','backcolor','pagebreak','customstyle','time','date','searchreplace','insertimage','attachment','autotypeset','cleardoc'],
            ['inserttable','charts','insertrow', //前插入行
              'insertcol', //前插入列
              'mergeright', //右合并单元格
              'mergedown', //下合并单元格
              'deleterow', //删除行
              'deletecol', //删除列
              'splittorows', //拆分成行
              'splittocols', //拆分成列
              'splittocells', //完全拆分单元格
              'deletecaption', //删除表格标题
              'inserttitle', //插入标题
              'mergecells', //合并多个单元格
              'deletetable', //删除表格
            ]
          ]
        },
        val : this.content
      }
    },
    created() {
    },
    watch: {
      content(val) {
        if (val && this.val != val && val != this.editor.getContent()) {
          if (this.editor) {
            this.editor.setContent(val);
          }
        }
      }
    },
    mounted(){
      const _this=this;
      this.editor=UE.getEditor('editor',this.config); //初始化UE
      this.editor.addListener("ready",function(){
        if (_this.content) {
          _this.setContent(_this.content);
        } else {
          _this.editor.setContent(''); // 确保UE加载完成后，放入内容。
        }
      });
      this.editor.addListener("contentChange",function(val){
        if (_this.contentChangeHandle) {
          _this.contentChangeHandle(_this.editor.getContent());
        }
      });

    },
    destroyed(){
      this.editor.destroy();
    },
    methods:{
      getUEContent(){
        return this.editor.getContent()
      },
      setDisabled(){
        this.editor.setDisabled('fullscreen');
      },
      setContent(isAppendTo) {
        this.editor.setContent(isAppendTo);
      }
    }

  }
</script>
